 <template>
    <div class="seller" ref="seller">
    	<div>
       <div class="seller-content">
       	<div class="overview">
       		<h1 class="title">{{ seller.name }}</h1> 
       		<div class="desc">
       			<star :size="36" :score="seller.score"></star>
       			<span class="text">({{ seller.ratingCount }})</span>
       			<span class="text">月售{{ seller.sellCount }}</span>
       		</div>
       		<ul class="remark">
       			<li class="block">
       				<h2>起送价</h2>
       				<div class="content">
       					<span class="stress">{{ seller.minPrice }}</span>
       				</div>
       			</li>
       			<li class="block">
       				<h2>商家配送</h2>
       				<div class="content">
       					<span class="stress">{{ seller.deliveryPrice }}</span>
       				</div>
       			</li>
       			<li class="block">
       				<h2>平均配送时间</h2>
       				<div class="content">
       					<span class="stress">{{ seller.deliveryTime }}</span>
       				</div>
       			</li>
       		</ul>
			<div class="favorite" @click="toggkeFavorite($event)">
				<span class="iconfont iconaixin" :class="{'active': favorite}"></span>
                <span class="text" style="padding-left: 8px">{{ favoriteText }}</span>
			</div>
       	</div>
       </div>
		<split></split>
		<div class="bulletin">
			<h1 class="title" style="margin-bottom: 8px;line-height: 14px;color:rgb(7,17,27); padding-top: 12px; padding-left: 12px;">公告与活动</h1>
			<div class="content-wrapper">
				<p class="content">{{ seller.bulletin }}</p>
			</div>
			<ul v-if="seller.supports" class="supports">
				<li class="support-item border-1px" v-for="(item , index) in seller.supports" :key="index">
					<span class="icon" :class="classMap[seller.supports[index].type]"></span>
					<span class="text">{{seller.supports[index].description}}</span>
				</li>
			</ul>
		</div>
			<split></split>
			<div class="pics">
				<h1 class="title">商家实景</h1>
				<div class="pic-wrapper" ref="picWrapper">
					<ul class="pic-list" ref="picList">
						<li class="pic-item" v-for="(pic,index) in seller.pics" :key="index">
							<img :src="pic" width="120" height="90" alt="">
						</li>
					</ul>
				</div>
			</div>
			<split></split>
			<div class="info">
				<h1 class="title border-1px">商家信息</h1>
				<ul class="info-content">
					<li class="info-item" v-for="(info,index) in seller.infos " :key="index">
						{{ info }}
					</li>
				</ul>
			</div>
		</div>
    </div>
</template>

<script>
	import BScroll from 'better-scroll'
	import star from '../../components/star/star.vue';
    import split from '../../components/split/split';
    import { savaToLocal,loadFromLocal } from '../../../js/store.js'
    export default {
        name: "seller",
		data(){
          return{
            favorite:( ()=>{
               if(!window.localStorage.favorite){
                   return false
			}else{
                   let favorite =JSON.parse(localStorage.favorite);
                   return favorite || false;
			}
			})()
		  }
		},
		computed:{
            favoriteText(){
                return this.favorite? '收藏':'未收藏'
			}
		},
       props:{
       	seller:{
       		type:Object
       	}
       },
       watch:{
          'seller'(){
            this._initScroll();
              this.initPics();
          }
       },
       components:{
       	star,
		split
       },
        created(){
            this.classMap=['decrease','discount','guarantee','invoice','special']
        },
		methods:{
			_initScroll(){
				if(!this.scroll){
					this.scroll = new BScroll(this.$refs.seller,{
						click:true
					})
				}else{
					 this.scroll.refresh()
				}
		},
            toggkeFavorite(event){
               if(!event._constructed){
                   return false;
			   }else{
                   this.favorite = !this.favorite;
                   savaToLocal(this.seller.id,'favirite',this.favorite);
                   let storage = window.localStorage;
                   storage.favorite = this.favorite;
			   }
			},
			initPics(){
                if(this.seller.pics){
                    let picWidth = 120;
                    let margin = 6;
                    let width = ( picWidth + margin ) * this.seller.pics.length - margin;
                    this.$refs.picList.style.width = width +'px';
                    this.$nextTick( ()=>{
                        if(!this.picScroll)
                    {
                        this.picScroll = new BScroll(this.$refs.picWrapper, {
                            scrollX: true,
                            eventPassthrough: 'vertical'
                        })
                    }else{
                            this.picScroll.refresh();
					}
                })

                }
			}
		},
		mounted(){
			this._initScroll();
			this.initPics();
		}
	}
</script>

<style lang="stylus" scoped>
 @import "~../../stylus/border.styl"
       .seller
         position:absolute
         top:174px
         bottom:0
         left:0
         width:100%
         overflow:hidden
         .overview
          position:relative
          padding:18px
          .title
           margin-bottom:8px
           line-height:14px
           color:rgb(7,17,27)
           font-size:14px
          .desc
           padding-bottom:18px
           border-1px(rgba(7,17,27,0.1))
           font-size:0
           .star
            display:inline-block
            margin-right:8px
            vertical-align:top
          .text
           margin-right:12px
           display:inline-block
           line-height:18px
           vertical-align:top
           font-size:10px
           color:rgb(77,85,93)
         .remark
          display:flex
          padding-top:18px
          .block
           flex:1
           text-align:center
           border-right:1px solid rgba(7,17,27,0.1)
           &:last-child
             border:none
           h2
            margin-bottom:4px
            line-height:12px
            font-size:10px
            color:rgb(147,153,159)
          .content
            line-height:24px
            font-size:10px
            color:rgb(7,17,27)
            .stress
             font-size:24px
         .favorite
           position:absolute
           width:50px
           right:18px
           top:18px
           text-align:center
           .iconaixin
            display:block
            color:#d4d6d9
            font-size:24px
            line-height:24px
            margin-bottom:4px
            &.active
          	  color:rgb(240,20,20)
           .text
          	 font-size:10px
          	 line-height:10px
          	 color:rgb(77,85,93)
         .bulletin
                padding:18px 18px 0 18px
	      .content-wrapper
	       padding: 0 12px 16px 12px
	       border-1px(rgba(7,17,27,0.1))
	       .content
	        line-height:24px
	        font-size:12px
	        color:rgb(240,20,20)
	        font-weight:200
	      .supports
	       .support-item
	        padding:16px 12px
	        font-size:0
	        border-1px(rgba(7,17,27,.1))
	        &:last-child:after
	         border-top:none
			.icon
				vertical-align: top
				display: inline-block
				width: 16px
				height: 16px
				margin-right: 6px
				background-size: 16px 16px
				background-repeat: no-repeat
				&.decrease
					bg-image('decrease_4')
				&.discount
					bg-image('discount_4')
				&.guarantee
					bg-image('guarantee_4')
				&.invoice
					bg-image('invoice_4')
				&.special
					bg-image('special_4')
			.text
				font-size: 12px
				line-height: 16px
				color:rgb(7,17,27)
				font-weight:200
		.pics
	      padding:10px
	      .title
           margin-bottom:12px
	       line-height:14px
		   color:rgb(7,17,27)
	       font-size:14px
	      .pic-wrapper
	       width:100%
	       overflow:hiedden
	       white-space:nowrap
	       .pic-list
	        font-size:0
	        .pic-item
	         display:inline-block
	         margin-right:6px
	         height:90px
	         width:120px
	         &:last-child
	          margin-right:0
	    .info
	      padding:18px 18px 0 18px
	      .title
	        font-size:14px
	        line-height:14px
	        color:rgb(7,17,27)
	        padding-bottom:12px
	        border-1px(rgba(7,17,27,0.1))
	      .info-content
	        .info-item
	          padding:16px 12px
	          font-size:12px
	          line-height:16px
	          color:rgb(7,17,27)
	          font-weight:200
	          border-1px(rgba(7,17,27,0.1))
	          &:last-child:after
	            border-top:none
</style>